<template>
  <view class="template-list-container">
    <nav-header :show-back="false" title="模板列表"></nav-header>
    
    <view class="content" :style="{ paddingTop: statusBarHeight + 44 + 'px' }">
      <!-- Category Tabs -->
      <view class="category-tabs">
        <view 
          class="tab-item" 
          v-for="(tab, index) in tabs" 
          :key="index"
          :class="{ 'active': currentTab === tab.value }"
          @click="changeTab(tab.value)"
        >
          <text>{{ tab.label }}</text>
        </view>
      </view>
      
      <!-- Template List -->
      <view class="template-list" v-if="templates.length > 0">
        <view class="grid-layout">
          <view class="grid-item" v-for="(template, index) in templates" :key="index">
            <template-card :template="template" @click="navigateToDetail(template.id)"></template-card>
          </view>
        </view>
      </view>
      
      <!-- Empty State -->
      <view class="empty-state" v-else>
        <u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
          <text>暂无模板</text>
        </u-empty>
      </view>
      
      <!-- Floating Action Button -->
      <view class="floating-btn" @click="navigateToTypeSelect">
        <u-icon name="grid-fill" color="#fff" size="24"></u-icon>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useTemplateStore } from '@/store/template.js'
import NavHeader from '@/components/nav-header.vue'
import TemplateCard from '@/components/template-card.vue'

const templateStore = useTemplateStore()
const statusBarHeight = ref(20)

// 标签页
const tabs = ref([
  { label: '全部', value: 'all' },
  { label: '最新', value: 'newest' },
  { label: 'VIP', value: 'vip' },
  { label: '收藏', value: 'favorite' }
])

// 当前选中的标签
const currentTab = computed(() => templateStore.currentTab)

// 根据当前标签获取模板列表
const templates = computed(() => templateStore.currentTemplates)

// 监听当前标签变化
watch(currentTab, (newVal) => {
  // 如果当前标签是收藏，但没有收藏任何模板，显示提示
  if (newVal === 'favorite' && templates.value.length === 0) {
    uni.showToast({
      title: '暂无收藏模板',
      icon: 'none'
    })
  }
})

onMounted(() => {
  // 获取状态栏高度
  const systemInfo = uni.getSystemInfoSync()
  statusBarHeight.value = systemInfo.statusBarHeight
  
  // 加载模板数据
  templateStore.loadFromStorage()
})

// 切换标签
const changeTab = (tab) => {
  templateStore.setCurrentTab(tab)
}

// 导航到模板详情
const navigateToDetail = (id) => {
  templateStore.setCurrentTemplateId(id)
  uni.navigateTo({
    url: `/pages/template/detail?id=${id}`
  })
}

// 导航到模板类型选择
const navigateToTypeSelect = () => {
  uni.navigateTo({
    url: '/pages/template/type'
  })
}
</script>

<style lang="scss" scoped>
.template-list-container {
  min-height: 100vh;
  background-color: #F8F8F8;
  
  .content {
    padding: 0 16px 16px;
    
    .category-tabs {
      display: flex;
      justify-content: space-between;
      padding: 12px 0;
      margin-bottom: 16px;
      border-bottom: 1px solid #EEEEEE;
      
      .tab-item {
        position: relative;
        padding: 8px 0;
        
        text {
          font-size: 16px;
          color: #666;
        }
        
        &.active {
          text {
            color: #5ac725;
            font-weight: 500;
          }
          
          &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 3px;
            background-color: #5ac725;
            border-radius: 3px;
          }
        }
      }
    }
    
    .template-list {
      .grid-layout {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -8px;
        
        .grid-item {
          width: 50%;
          padding: 0 8px;
		  box-sizing: border-box;
        }
      }
    }
    
    .empty-state {
      padding: 60px 0;
      text-align: center;
    }
    
    .floating-btn {
      position: fixed;
      right: 20px;
      bottom: 100px;
      width: 56px;
      height: 56px;
      border-radius: 28px;
      background-color: #5ac725;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 4px 12px rgba(90, 199, 37, 0.3);
    }
  }
}
</style> 